<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/bloglist.css">
</head>
<body>
    <!--这是一个导航栏-->
    <div class="nav">
        <img src="image/logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!--这个标签仅仅用于占位，把我们的a标签挤到右面去-->
        <div class="spacer"></div>
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>
    <!--页面主体部分-->
    <div class="container">

    <!--左侧信息-->
    <div class="container-left">
        <div class="card">
            <img src="image/BLOG-头像.png" alt="">
            <h2>苏西西</h2>
            <a href="#">github</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>2</span>
                <span>1</span>


            </div>
        </div>


    </div>


    <!--右侧信息-->
    <div class="container-right">
        <!--表示一篇博客-->
        <div class="blog">
            <!--博客标题-->
            <div class="title">我的第一篇博客</div>
            <!--发布时间-->
            <div class="date">2023-12-11</div>
            <!--摘要-->
            <div class="desc">好好学习Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores quod iusto possimus in nisi voluptate iste necessitatibus facere, sequi saepe, porro debitis aspernatur autem aperiam temporibus a voluptatum explicabo culpa.
            </div>
            <!--查看全文-->
            <a href="#">查看全文 &gt;&gt;</a>
        </div>

        <div class="blog">
            <!--博客标题-->
            <div class="title">我的第二篇博客</div>
            <!--发布时间-->
            <div class="date">2023-12-12</div>
            <!--摘要-->
            <div class="desc">好好学习Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores quod iusto possimus in nisi voluptate iste necessitatibus facere, sequi saepe, porro debitis aspernatur autem aperiam temporibus a voluptatum explicabo culpa.
            </div>
            <!--查看全文-->
            <a href="#">查看全文 &gt;&gt;</a>
        </div>

        <div class="blog">
            <!--博客标题-->
            <div class="title">我的第三篇博客</div>
            <!--发布时间-->
            <div class="date">2023-12-13</div>
            <!--摘要-->
            <div class="desc">好好学习Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores quod iusto possimus in nisi voluptate iste necessitatibus facere, sequi saepe, porro debitis aspernatur autem aperiam temporibus a voluptatum explicabo culpa.
            </div>
            <!--查看全文-->
            <a href="#">查看全文 &gt;&gt;</a>
        </div>

        <div class="blog">
            <!--博客标题-->
            <div class="title">我的第四篇博客</div>
            <!--发布时间-->
            <div class="date">2023-12-14</div>
            <!--摘要-->
            <div class="desc">好好学习Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores quod iusto possimus in nisi voluptate iste necessitatibus facere, sequi saepe, porro debitis aspernatur autem aperiam temporibus a voluptatum explicabo culpa.
            </div>
            <!--查看全文-->
            <a href="#">查看全文 &gt;&gt;</a>
        </div>

        <div class="blog">
            <!--博客标题-->
            <div class="title">我的第五篇博客</div>
            <!--发布时间-->
            <div class="date">2023-12-15</div>
            <!--摘要-->
            <div class="desc">好好学习Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores quod iusto possimus in nisi voluptate iste necessitatibus facere, sequi saepe, porro debitis aspernatur autem aperiam temporibus a voluptatum explicabo culpa.
            </div>
            <!--查看全文-->
            <a href="#">查看全文 &gt;&gt;</a>
        </div>
    </div>

</div>
</body>
</html>